<template>
<div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import {
    defaults
} from 'js-cookie'

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '350px'
        },
        autoResize: {
            type: Boolean,
            default: true
        },
        chartData: {
            type: Array,
            default: function () {
                return []
            }
        }
    },
    data() {
        return {
            chart: null
        }
    },
    watch: {
        chartData: {
            deep: true,
            handler(val) {
                // this.setOptions(val)
                this.initChart(val)
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            // this.initChart()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart(val) {
            this.chart = echarts.init(this.$el, "macarons")
            this.setOptions(val)
        },
        setOptions(val) {

          

            let legend = []

            val.forEach((item,index)=>{
                 if(index>0){
                   legend.push(item[0])
                 }

            })
            

            let xD= val[0].slice(1)
            
            let series = []

            val.slice(1).forEach((item, index) => {
                

                let obj = {
                    name: item[0],
                    // itemStyle: {
                    //     normal: {
                    //         color: index%2 === 0 ? '#FF005A' : '#3888fa',
                    //         lineStyle: {
                    //             color:  index%2 === 0 ? '#FF005A' : '#3888fa',
                    //             width: 2
                    //         }
                    //     }
                    // },
                    smooth: true,
                    type: 'line',
                    data: item.slice(1),
                    animationDuration: 2800,
                    animationEasing: 'cubicInOut'
                }

                series.push(obj)

            })


            this.chart.setOption({

                xAxis: {
                  data:xD,
                  type: 'category',
                  boundaryGap: true,
                  axisTick: {
                    show: false
                  }
                },
                grid: {
                  left: 10,
                  right: 10,
                  bottom: 20,
                  top: 30,
                  containLabel: true
                },
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'cross'
                  },
                  padding: [5, 10]
                },
                yAxis: {
                  axisTick: {
                    show: false
                  }
                },
                legend: {
                  data: legend
                },
                series:series
            })
        }
    }
}
</script>
